const React = require('react');
const {
  View,
  StyleSheet,
} = require('react-native');
const {
  JDDevice,
  JDText,
  JDSwitch,
  JDRouter,
  JDTouchable
} = require('@areslabs/jdreact-core-lib');
const PropTypes = require('prop-types');
const { NavigationBar } = JDRouter;

class JDToastExample extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  };
  state = {
    values: [false, false, false],
  };
  goBack = () => {
    this.context.router.goBack();
  }
  render() {
    return (
      <View style={styles.wrapper}>
        <NavigationBar
          Title="JDSwitch"
          /**是否显示 三个点 ... */
          showMoreNav={true}
          // 设置title字体样式
          titleStyle={{ color: '#333', fontSize: JDDevice.getFontSize(40) }}
          // 设置整个导航栏的样式
          navStyle={{ backgroundColor: '#fff' }}
          LeftButton={() => {
            /**将返回换成自己需要的样式 */
            return (
              <JDTouchable onPress={this.goBack} style={{ marginLeft: 10 }}>
                <JDText>返回</JDText>
              </JDTouchable>
            )
          }}
          RightButton={() => {
            return (
              <JDTouchable style={{ marginRight: 20 }} key={1}
                onPress={() => {/**分享逻辑 */ }}>
                <JDText>分享</JDText>
              </JDTouchable>
            )
          }}
          renderMoreItem={() => {
            // 三个点支持自定义
            return (
              <View style={{ marginRight: 5 }}>
                <JDText>三点</JDText>
              </View>
            )
          }}
          renderMoreNavList={() => {
            /** 整块自定义 */
            return (
              <View style={{ backgroundColor: '#FFF', width: 120, height: 40, marginTop: 5, justifyContent: 'center', alignItems: 'center' }}>
                <JDText>自定义按钮</JDText>
              </View>
            )
          }}
        />
        <View style={styles.body}>
          <View style={styles.group}>
            <JDText>可用Switch</JDText>
            <JDSwitch value={this.state.values[0]} onChange={this._onChange.bind(this, 0)} width={33} height={20} />
            <JDSwitch style={styles.switch}
              activeStyle={{
                justifyContent: 'flex-end',
                borderRightWidth: 0,
                backgroundColor: 'blue',
                borderColor: 'blue',
                paddingRight: 1
              }}
              value={this.state.values[1]}
              onChange={this._onChange.bind(this, 1)} />
            <JDSwitch style={styles.switch} value={this.state.values[2]} onChange={this._onChange.bind(this, 2)} width={100} height={60} />
          </View>

          <View style={styles.group}>
            <JDText>不可用Switch</JDText>
            <JDSwitch disabled={true} value={false} />
            <JDSwitch style={styles.switch} disabled={true} value={true} />
          </View>
        </View>
      </View>
    );
  }

  _onChange = (index) => {
    let values = this.state.values;
    values = [
      ...values.slice(0, index),
      !values[index],
      ...values.slice(index + 1)
    ];
    this.setState({ values });
  };
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
  },
  group: {
    marginTop: JDDevice.getRpx(20),
    paddingTop: JDDevice.getRpx(20),
  },

  switch: {
    marginTop: JDDevice.getRpx(20),
  }
});

module.exports = JDToastExample;
